<template>
	<view class="content" :style="computedBackgroundStyle">
		<view class="status_bar">
			<!-- 这里是状态栏 -->
		</view>
		<!--展开导航-->
		<view class="nav">
			<view class="nav-header">
				<view class="nav-tools">
					<view class="nav-item" @click="goChat">
						<u-image
							src="/static/images/icon/message-white.png"
							width="46rpx"
							height="46rpx"
						></u-image>
						<view class="nav-item-badge" v-if="msgNum>0">{{msgNum}}</view>
					</view>
					<view class="nav-item" @click="goShare">
						<u-image
							src="/static/images/icon/share-white.png"
							width="46rpx"
							height="46rpx"
						></u-image>
					</view>
					<view class="nav-item" @click="openLeftMenu">
						<u-image
							src="/static/images/icon/menu-white.png"
							width="46rpx"
							height="46rpx"
						></u-image>
					</view>
				</view>
			</view>
		</view>
		<!--展开导航结束-->
		
		<!-- 用戶信息 -->
		<view class="content-user">
			
			<view class="user-base">
				<view class="user-base-avatar">
					<u-image 
						:src="user_info.avatar" 
						shape="circle"
						width="156"
						height="156"
					></u-image>
				</view>
				<view class="user-base-info">
					<view class="user-base-header" style="display: flex;justify-content: flex-start;align-items: center;">
						<view class="user-base-title" style="color: #232426;font-size: 40rpx;font-weight: 600;">{{user_info.nickname}}</view>
						<view v-if="user_info.vip" style="margin-left:12rpx;">
							<u-image
								src="/static/images/icon/cert.svg"
								width="36rpx"
								height="36rpx"
							></u-image>
						</view>
						<view v-if="user_info.star" class="user-base-badge" style="margin-left: 12rpx;display: flex;justify-self: center;background-color: #FFF0D8;color: #F67914;font-size: 22rpx;padding: 4rpx 14rpx 4rpx 18rpx;border-radius: 52rpx;height: 38rpx;line-height: 38rpx;align-items: center;">
							<view>熱門之星</view>
							<image
								src="/static/images/icon/fire.png"
								style="margin:0;width:26rpx;height: 26rpx;"
							></image>
						</view>
					</view>
					<view class="user-base-list">
						<view class="user-base-item" @click="goMyFocus">
							<view class="user-base-item-value">{{user_info.star}}</view>
							<view class="user-base-item-title">追蹤</view>
						</view>
						<view class="user-base-item" @click="goMyFans">
							<view class="user-base-item-value">{{user_info.fans}}</view>
							<view class="user-base-item-title">粉絲</view>
						</view>
						<view class="user-base-item" @click="goMyRate">
							<view class="user-base-item-value">{{user_info.rate}}</view>
							<view class="user-base-item-title">評價</view>
						</view>
					</view>
				</view>
			</view>
			<view class="user-topic">
				<view class="user-topic-content">
					{{user_info.bio}}
				</view>
			</view>
			<view class="user-tags">
				<view v-if="user_info.sex==2" class="user-tags-item-lady">
					<view>
						<u-image
							src="/static/images/icon/lady.svg"
							width="28rpx"
							height="28rpx"
						></u-image>
					</view>
					<view>{{user_info.age}}&nbsp;歲</view>
				</view>
				<view v-else class="user-tags-item-male">
					<view>
						<u-image
							src="/static/images/icon/male.svg"
							width="28rpx"
							height="28rpx"
						></u-image>
					</view>
					<view>{{user_info.age}}&nbsp;歲</view>
				</view>
				<view class="user-tags-item">
					{{user_info.address}}
				</view>
				<view v-if="tagList.length > 0" v-for="(item,index) in tagList" :key="index" class="user-tags-item">
					{{item}}
				</view>
			</view>
			<view class="user-base-number">
				<view class="user-base-number-value">ORID：{{user_info.orid}}</view>
			</view>
			<view class="user-base-tools">
				<view @click="editUserInfo" class="user-tools-btn user-tools-btn-default">
					<image src="/static/images/icon/setting.png" style="width: 28rpx;height: 28rpx;margin-right: 12rpx;"></image>
					<view>編輯資料</view>
				</view>
				<view class="user-tools-btn user-tools-btn-active" @click="goWallet">
					<image src="/static/images/icon/wallet_active.png" style="width: 28rpx;height: 28rpx;margin-right: 12rpx;"></image>
					<view v-if="user_info.money > 0">已賺 ${{user_info.money}}</view>
					<view v-else>OR 錢包</view>
				</view>
			</view>
			
		</view>
		<!-- 用戶信息結束 -->
		
		<!--内容-->
		<view class="content-body" >
			<view class="body-menu-list">
				<view :class="{'body-menu-item-active':current==3,'body-menu-item':current!=3}" @click="changeType(3)">
					貼文
				</view>
				<view :class="{'body-menu-item-active':current==1,'body-menu-item':current!=1}" @click="changeType(1)">
					達人
				</view>
				<view :class="{'body-menu-item-active':current==2,'body-menu-item':current!=2}" @click="changeType(2)">
					任務
				</view>
				<view :class="{'body-menu-item-active':current==4,'body-menu-item':current!=4}" @click="changeType(4)">
					點讚
				</view>
				<view :class="{'body-menu-item-active':current==5,'body-menu-item':current!=5}" @click="changeType(5)">
					收藏
				</view>
			</view>
			<!--吸頂Tools-->
			<view v-if="showNav" style="position: fixed;top: 0;z-index: 99;background: #fff;padding-bottom: 15rpx;box-sizing: border-box;width: 100%;padding-top: constant(safe-area-inset-top);padding-top: env(safe-area-inset-top);">
				<view class="body-menu-list">
					<view :class="{'body-menu-item-active':current==3,'body-menu-item':current!=3}" @click="changeType(3)">
						貼文
					</view>
					<view :class="{'body-menu-item-active':current==1,'body-menu-item':current!=1}" @click="changeType(1)">
						達人
					</view>
					<view :class="{'body-menu-item-active':current==2,'body-menu-item':current!=2}" @click="changeType(2)">
						任務
					</view>
					<view :class="{'body-menu-item-active':current==4,'body-menu-item':current!=4}" @click="changeType(4)">
						點讚
					</view>
					<view :class="{'body-menu-item-active':current==5,'body-menu-item':current!=5}" @click="changeType(5)">
						收藏
					</view>
				</view>
			</view>
			<!--吸頂Tools結束-->
			
			<view class="body-content">
				<view v-if=" current == 4 || current == 5" style="width:100%;padding:0 24rpx 22rpx;display: flex;justify-content: space-between;box-sizing: border-box;align-items: center;">
					<view style="color: #6A707C;font-size: 28rpx;display: flex;justify-content: flex-start;align-items: center;">
						共<view style="margin: 0 3rpx;">{{num}}</view>筆
					</view>
					<view style="display: flex;justify-content: flex-end;">
						<view class="fifter-btn" @click="selTypeFn">
							<view>
								<u-image
									src="/static/images/icon/tools.png"
									width="28rpx"
									height="28rpx"
								></u-image>
							</view>
							<view class="fifter-title">
								{{TypeString}}
							</view>
						</view>
					</view>
				</view>
			</view>
			
			<view style="margin-top: 32rpx;padding:0 23rpx;background-color: #FFF;min-height: 980rpx;">
				<card-list :listData="data_list" :type="cardListType"></card-list>
				<view style="width: 100%;height: 800rpx;margin: 0 auto;text-align: center;padding-top: 120rpx;" v-if="data_list.length == 0">
					<view style="color: #BEC0C5;font-size: 24rpx;">目前沒有東西</view>
					<view v-if="current == 3" style="padding: 12rpx 40rpx;border:1rpx solid #E5E6E8; border-radius: 200rpx;background-color: #FFF;color: #232426;display: inline-block;margin: 36rpx auto 0;font-size:28rpx;">
						新增貼文
					</view>
				</view>
			</view>
			
			
			
		</view>
		<!--内容结束-->
		<!--右側彈窗-->
		<left-menu-popup ref="leftMenuPopup" />
		<!--右側彈窗結束-->
		<!--发布选择弹窗-->
		<pushlish-popup ref="pushlishPopup" ></pushlish-popup>
		<!--发布选择弹窗结束-->
		<card-popup ref="cardPopup" :listData="listData" @checkItem="handleData" />
		
	</view>
</template>

<script>
	import pushlishPopup from '@/components/publish-popup.vue';
	import leftMenuPopup from '@/components/left-menu-popup.vue';
	import cardPopup from '@/components/card-popup.vue';
	import cardList from '@/components/card-list.vue'
	import uEmpty from '@/uni_modules/uview-ui/components/u-empty/u-empty.vue';
	import uAvatar from '@/uni_modules/uview-ui/components/u-avatar/u-avatar.vue';
	import { myCmsList, getUserInfo, getMsg } from '@/config/api.js';
	
	export default {
		data() {
			return {
				bgImage:'',
				type:1,
				msgNum:0,
				noticeNum:0,
				data_list:[],
				page:1,
				max_page:0,
				current:1,
				user_info:{},
				num:0,
				tagList:[],
				TypeString:'全部',
				likeType:0,
				likeTypeString:'全部',
				starType:0,
				starTypeString:'全部',
				listData:[{
					id:3,
					title:'貼文',
				},{
					id:1,
					title:'達人',
				},{
					id:2,
					title:'任務',
				}],
				scrollTop:0,
				hideThreshold:395,
				showNav:false,
				cardListType:'task'
			}
		},
		components: {
			pushlishPopup,uEmpty,uAvatar,leftMenuPopup,cardPopup,cardList
		},
		mounted(){
			uni.$on('showMidButtonPopup', () => {
				this.$refs.pushlishPopup.show();
			})
		},
		computed:{
			computedBackgroundStyle(){
				return {
					backgroundImage: this.bgImage 
						? `url(${this.bgImage})` 
					    : 'linear-gradient(180deg, rgba(59, 59, 59, 0.5) -10%, rgba(59, 59, 59, 0) 40%)',
							backgroundSize: 'contain',
						    backgroundRepeat: 'no-repeat'
				}
			}
		},
		onReachBottom(){
			// if( this.page <= this.max_page ){
			// 	uni.showLoading({
			// 		icon:'none',
			// 		title:'請求中'
			// 	})
			// 	this.getData();
			// }
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
			console.log(this.scrollTop)
			if(this.scrollTop > this.hideThreshold){
				this.showNav = true;
			} else {
				this.showNav = false;
			}
		},
		onPullDownRefresh() {
			this.getUserInfo()
			this.getNotice();
			this.getData();
			setTimeout(function () {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		onLoad() {
			
		},
		onShow(){
			this.data_list = [];
			this.getUserInfo()
			this.getNotice();
			this.getData();
		},
		onTabItemTap(item) {
			const uid      = uni.getStorageSync('userId');
			const platform = uni.getSystemInfoSync().platform;
			
			if( platform == 'ios' && item.index == 3 && !uid ){
				uni.reLaunch({
					url: '/pages/index/login'
				})
				return;
			} else if(item.index == 4 && !uid){
				uni.reLaunch({
					url: '/pages/index/login'
				})
				return;
			} else {
				
			}
		},
		methods: {
			getUserInfo(){
				
				let that = this;
				
				getUserInfo().then((res) => {
					//success
					uni.setStorageSync('userInfo', res);//保存用戶信息
					uni.setStorageSync('userId', res.id);//保存用戶信息
					
					that.user_info = res;
					
					that.bgImage = res.background;
					
					if( res.job ){
						that.tagList = res.job.split(',');
					}
				}).catch(() =>{
					
				})
			},
			getNotice(){
				let that = this;
				let userId = uni.getStorageSync('userId');
				if( userId > 0 ){
					let data = {
						data:{
							userid:userId
						}
					}
					
					getMsg(data).then((res) => {
						//success
						console.log(res)
						that.msgNum = res.chat_num;
						that.noticeNum = res.num;
					}).catch(() =>{
						
					})
				}
			},
			//加載數據
			getData(){
				let that = this;
				let userId = uni.getStorageSync('userId');
				let data = {
					page:this.page,
					type:this.current//1貼文,2達人,3任務,4點讚,5收藏
				}
				myCmsList(data).then((res) => {
					//success
					that.data_list = that.data_list.concat(res.data);
					console.log(that.data_list)
					that.max_page = Math.ceil(res.total / 10);
					that.num = res.total;
					that.page++;
					uni.hideLoading();
				}).catch(() =>{
					
				})
			},
			changeType(id){
				this.current = id;
				this.data_list = [];
				this.page = 1;
				if( id == 4 ){
					this.cardListType = 'likes';
					this.TypeString = this.likeTypeString;
				} else if(id == 5){
					this.cardListType = 'star';
					this.TypeString = this.starTypeString;
				} else if(id == 3){
					this.cardListType = 'colony';
				} else if(id == 2){
					this.cardListType = 'recruit';
				} else {
					this.cardListType = 'task';
				}
				uni.showLoading({
					
				})
				this.getData();
			},
			openLeftMenu(){
				this.$refs.leftMenuPopup.show();
			},
			goMyFocus(){
				uni.navigateTo({
					url:'/pages/my/fans?type=focus'
				})
			},
			goMyFans(){
				uni.navigateTo({
					url:'/pages/my/fans?type=fans'
				})
			},
			goMyRate(){
				uni.navigateTo({
					url:'/pages/my/rate'
				})
			},
			editUserInfo(){
				uni.navigateTo({
					url:'/pages/my/edit'
				})
			},
			goWallet(){
				uni.navigateTo({
					url:'/pages/my/wallet'
				})
			},
			goChat(){
				uni.navigateTo({
					url:'/pages/my/chat'
				})
			},
			goShare(){
				uni.shareWithSystem({
				  summary: '分享測試',
				  href: 'https://uniapp.dcloud.io',
				  success(){
				    // 分享完成，请注意此时不一定是成功分享
				  },
				  fail(){
				    // 分享失败
				  }
				})
			},
			selTypeFn(){
				this.$refs.cardPopup.show();
			},
			handleData(data) {
				//接收组件数据
				console.log('接收到组件数据:', data)
				this.$refs.cardPopup.close();
				if( this.current == 4 ){
					//點贊
					this.likeType = data.id;
					this.likeTypeString = data.title;
					this.TypeString = this.likeTypeString;
				} else {
					//收藏
					this.starType = data.id;
					this.starTypeString = data.title;
					this.TypeString = this.starTypeString;
				}
				//重新获取數據
				this.getData();
			},
		}
	}
</script>

<style lang="scss">
	.content {
		width: 100%;
		font-family: PingFang TC, PingFang TC;
		background-size: contain;
		background-repeat: no-repeat;
		width: 100%;
		min-height: 274rpx;
		// background-color: #f6f8fa;
	}
	.nav{
		width: 100%;
		margin-top: 12rpx;
		
		.nav-header{
			display: flex;
			justify-content: flex-end;
			padding: 0 32rpx;
			
			.nav-tools{
				display: flex;
				justify-content: space-between;
				margin-left: 16rpx;
				.nav-item{
					position: relative;
					display: inline-block;
					margin: 0 10rpx;
					padding: 15rpx 0;
					.nav-item-badge{
						position: absolute;
						top: 0px; /* 根据需要调整 */
						right: -10rpx; /* 根据需要调整 */
						background-color: #FF3D43;
						color: white;
						border-radius: 50%; /* 圆形 */
						width: 40rpx; /* 根据需要调整 */
						height: 40rpx; /* 根据需要调整 */
						display: flex;
						justify-content: center;
						align-items: center;
						font-size: 22rpx; /* 根据需要调整 */
					}
				}
			}
		}
		.nav-banner{
			margin: 40rpx auto 0;
			width: 682rpx;
		}
	}
	.content-user{
		width: 100%;
		box-sizing: border-box;
		border-radius: 50rpx 50rpx 0 0;
		background-color: #FFF;
		margin-top: 98rpx;
		padding-bottom: 40rpx;
		
		.user-base{
			width: 100%;
			margin: 0 auto;
			padding: 40rpx 48rpx 0;
			display: flex;
			justify-content: flex-start;
			box-sizing: border-box;
			
			.user-base-avatar{
				width: 156rpx;
				height: 156rpx;
				
				.user-base-avatar image{
					border-radius: 50%;
				}
			}
			.user-base-info{
				margin-left: 48rpx;
				min-width: 480rpx;
				
				.user-base-header{
					display: flex;
					justify-content: flex-start;
					
					
					.user-base-title{
						color: #232426;
						font-size: 40rpx;
						
					}
					
					.user-base-badge{
						margin-left: 24rpx;
						display: flex;
						justify-self: center;
						background-color: #FFF0D8;
						color: #F67914;
						font-size: 22rpx;
						padding: 4rpx 16rpx;
						border-radius: 52rpx;
						height: 38rpx;
						line-height: 38rpx;
						align-items: center;
					}
				}
				.user-base-list{
					display: flex;
					justify-content: space-between;
					box-sizing: border-box;
					padding-right:100rpx;
					
					.user-base-item{
						text-align: left;
						margin-top: 20rpx;
						
						.user-base-item-title{
							color: #BEC0C5;
							font-size: 22rpx;
						}
						.user-base-item-value{
							color: #232426;
							font-size: 32rpx;
							font-weight: 600;
						}
					}
				}
			}
		}
		.user-topic{
			margin-top: 48rpx;
			width: 100%;
			box-sizing: border-box;
			padding: 0 48rpx;
			
			.user-topic-content{
				color: #808690;
				font-size: 28rpx;
			}
		}
		.user-tags{
			margin-top: 28rpx;
			width: 100%;
			box-sizing: border-box;
			padding: 0 48rpx;
			display: flex;
			justify-content: flex-start;
			
			.user-tags-item{
				font-size: 22rpx;
				color: #6A707C;
				background-color: #F0F0F0;
				padding:4rpx 10rpx;
				border-radius: 12rpx;
				margin-right: 16rpx;
			}
			.user-tags-item-male{
				font-size: 22rpx;
				color: #51A2CC;
				background-color: #EDF5FF;
				padding:4rpx 10rpx;
				border-radius: 12rpx;
				margin-right: 16rpx;
				display: flex;
				justify-content: center;
				align-items: center;
			}
			.user-tags-item-lady{
				font-size: 22rpx;
				color: #E66CAB;
				background-color: #FFEDF7;
				padding:4rpx 10rpx;
				border-radius: 12rpx;
				margin-right: 16rpx;
				display: flex;
				justify-content: center;
				align-items: center;
			}
		}
		.user-base-number{
			margin-top: 24rpx;
			width: 100%;
			box-sizing: border-box;
			padding: 0 48rpx;
			
			.user-base-number-value{
				font-size: 24rpx;
				color: #808690;
				font-family: 500;
			}
		}
		.user-base-tools{
			margin-top: 36rpx;
			width: 100%;
			box-sizing: border-box;
			padding: 0 48rpx;
			display: flex;
			justify-content: space-between;
			
			.user-tools-btn{
				display: flex;
				justify-content: center;
				border-radius: 200rpx;
				font-size: 28rpx;
				width: 310rpx;
				height: 68rpx;
				line-height: 68rpx;
				align-items: center;
			}
			
			.user-tools-btn-default{
				border: 2rpx solid #E5E6E8;
				color: #232426;
			}
			.user-tools-btn-active{
				border: 2rpx solid #27C5D6;
				color: #27C5D6;
			}
		}
	}
	
	.content-body{
		width: 100%;
		background: #FFF;
		border-top: 20rpx solid #F6F8FA;
		
		.body-nav{
			width: 100%;
			display: flex;
			justify-content: space-between;
			font-size: 32rpx;
			color: #808690;
			font-weight: 500;
			padding: 32rpx 36rpx;
			box-sizing: border-box;
			.body-nav-list{
				display: flex;
				justify-content: space-between;
				.body-nav-item{
					margin: 0 64rpx 0 0;
				}
				.avtive{
					font-weight: 600;
					color: #232426;
				}
			}
		}
		.body-menu-list{
			width: 100%;
			display: flex;
			justify-content: space-around;
			padding: 32rpx 32rpx 0;
			box-sizing: border-box;
			border-bottom: 2rpx solid #F6F8FA;
			
			.body-menu-item{
				color: #808690;
				padding: 0;
				font-size: 28rpx;
				width: 58rpx;
				text-align: center;
			}
			.body-menu-item-active{
				padding-bottom: 12rpx;
				font-size: 28rpx;
				color: #232426;
				border-bottom: 5rpx solid #232426;
				font-weight: 500;
				width: 58rpx;
				text-align: center;
			}
		}
		.body-content{
			// width: 720rpx;
			margin: 28rpx auto;
			display: flex;
			justify-content: space-between;
			flex-wrap: wrap;
			
			.body-card{
				width: 345rpx;
				margin: 8rpx;
				border-radius: 8rpx;
				background-color: #FFF;
				
				.card-cover{
					width: 100%;
					// border-radius: 16rpx;
					
				}
				.card-body{
					width: 100%;
					padding: 20rpx 24rpx;
					word-wrap: break-word;
					box-sizing: border-box;
					
					.card-title{
						font-size: 28rpx;
						color: #020202;
					}
					.card-info{
						width: 100%;
						padding: 16rpx 0 0;
						box-sizing: border-box;
						color: #808690;
						font-size: 28rpx;
						display: flex;
						justify-content: flex-start;
						.card-info-price{
							color: #378CFC;
							margin-right: 6rpx;
						}
						.card-info-unit{
							color: #808690;
							margin-left: 6rpx;
						}
					}
				}
				.card-footer{
					width: 100%;
					display: flex;
					justify-content: space-between;
					box-sizing: border-box;
					padding: 0 24rpx;
					height: 60rpx;
					align-items: center;
					
					.card-footer-avatar{
						display: flex;
						justify-content: flex-start;
						line-height: 60rpx;
						height: 60rpx;
						align-items: center;
						
						.card-avatar-image{
							margin-right: 8rpx;
							// padding-top: 8rpx;
						}
						
						.card-footer-name{
							color: #6A707C;
							font-size: 22rpx;
							max-width: 154rpx;
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;
							line-height: 60rpx;
						}
					}
					.card-footer-likes{
						display: flex;
						justify-content: flex-end;
						font-size: 24rpx;
						line-height: 60rpx;
						height: 60rpx;
						align-items: center;
						.card-footer-likes-images{
							// padding-top: 8rpx;
							padding-right: 10rpx;
						}
						.card-likes-item{
							color: #6A707C;
						}
						.card-likes-item-active{
							color: #1AAEC0;
						}
					}
					.card-footer-btn{
						color: #232426;
						border: 2rpx solid #E5E6E8;
						font-size: 24rpx;
						padding: 8rpx 26rpx;
						border-radius: 200rpx;
						box-shadow: 0rpx 4rpx 0rpx 0rpx rgba(0,0,0,0.02);
					}
				}
			}
		}
	}
	
	.slot-icon{
		width: 50rpx;
		height: 50rpx;
	}
	.plus-icon{
		width: 48rpx;
		height: 48rpx;
		background-color: #27C5D6;
		padding: 22rpx;
		border-radius: 50%;
		margin-top: 10rpx;
	}
	.indicator{
		justify-content: center;
		@include flex(row);
		
		&__dot {
			height: 8rpx;
			width: 32rpx;
			border-radius: 4rpx;
			background-color: rgba(255, 255, 255, 0.35);
			margin: 0 6px;
			transition: background-color 0.3s;

			&--active {
				background-color: #ffffff;
			}
		}
	}
	::-webkit-scrollbar {
	  display: none !important; /* 隐藏滚动条 */
	  width: 0 !important;
	  height: 0 !important;
	  -webkit-appearance: none;
	  background: transparent;
	}
	.fifter-btn{
		display: flex;
		justify-content: center;
		align-items: center;
		border: 2rpx solid #E5E6E8;
		padding: 12rpx 24rpx;
		border-radius: 12rpx;
		margin-left: 8rpx;
		
		.fifter-title{
			margin-left: 12rpx;
			font-size: 28rpx;
		}
	}
	
</style>
